import React, { Component } from 'react';
import './OrderDetails.css'
import aa from '../../uitls/session'
// import axios from 'axios'


class Orderdetails extends Component {
    constructor(){
        super()
        this.state={
            orderdetailsList:null

        }
    }
// componentWillUnmount(){
//     console.log(this.props.location.state.order);
//     this.setState({
//         orderdetailsList:this.props.location.state.order
//     })
// }   
    // componentWillUnmount(){
    //     sessionStorage.removeItem("order");

    // }
    componentDidMount() {
        // console.log(aa.getStorage("order"));
        let orderid=aa.getStorage("order")
        if(orderid===null){
            this.props.history.push({pathname:"/Home"})
        }else{
            this.axios({
            url: 'api1/olife/prder/query',//不用引入，直接在api后面接接口
            method: 'get',
            params: {
                user_id:1,
                order_id:orderid
            }
        }).then(data => {
            console.log(data.data.data[0]);
            // console.log(data.data.data)
            if(data.data.code===200){
                this.setState({
                    orderdetailsList:data.data.data[0]
                })
            }
        }).catch(err => {
            console.log(err)
        })
        }
    }
    returnorder=()=>{
        this.props.history.push({pathname:"/Home/Order"})

    }
    showTitle=(state)=>{
        if(state==='待处理'){
            return (<div><p>正在等待商家接单</p><p>若无人接单，订单金额将退回</p></div>)
        }
        if(state==='已取消'){
            return (<p>订单已取消，欢迎您再次光临</p>)
        }
        if(state==='已完成'){
            return (<p>感谢您使用1号生活，期待您的再次光临</p>)
        }

    }
    showShop=()=>{
        return this.state.orderdetailsList.orderInfo.map(item=><div key={item.goods_id} className='w_storename'>
        <div className='w_storename1'>
            <div className='w_img'><img src="../../../logo512.png" alt=""/></div>
            <div>
                <div className='w_wenzi'><span>{item.goods.goods_name}</span></div>
                <div className='w_shuliang'><span>x{item.goods_num}</span></div>
            </div>
        </div> 
    <div><span>￥{item.goods_account_money}</span></div>
    </div>)
    }
    render() {
        if(this.state.orderdetailsList===null){
            return(<div>正在加载</div>)
        }else{
            return (
            <div className='w_mydiv'>
                <div className='w_header'>
                    <div onClick={()=>this.returnorder()}><span className='iconfont icon-fanhuijian1'></span></div>
                    <h3>订单{this.state.orderdetailsList.orderStatus.order_status_name}</h3>
                </div>
                <div className='w_content'>
                    <div className='w_content_header'>
                        {this.showTitle(this.state.orderdetailsList.orderStatus.order_status_name)}
                        {/* <p>感谢您使用1号生活，期待您的再次光临</p> */}
                    </div>
                    <div className='w_content_order'>
                        <div className='w_dianming'>
                            <p>{this.state.orderdetailsList.shop1.shop_name}</p>
                            <div><span className='iconfont icon-iconfontyoujiantou-zuo'></span></div>
                        </div>
                        <div className='w_line'></div>
                        {/* <div className='w_storename'>
                            <div className='w_storename1'>
                                <div className='w_img'><img src="../../../logo512.png" alt=""/></div>
                                <div>
                                    <div className='w_wenzi'><span>2块麻辣鸡翅</span></div>
                                    <div className='w_shuliang'><span>x2</span></div>
                                </div>
                            </div> 
                            <div><span>￥25</span></div>
                        </div> */}
                        {this.showShop()}
                        {/* <div className='w_storename'>
                            <div className='w_storename1'>
                                <div className='w_img'><img src="../../../logo512.png" alt=""/></div>
                                <div>
                                    <div className='w_wenzi'><span>2块麻辣鸡翅</span></div>
                                    <div className='w_shuliang'><span>x2</span></div>
                                </div>
                            </div> 
                            <div><span>￥25</span></div>
                        </div>
                        <div className='w_storename'>
                            <div className='w_storename1'>
                                <div className='w_img'><img src="../../../logo512.png" alt=""/></div>
                                <div>
                                    <div className='w_wenzi'><span>2块麻辣鸡翅</span></div>
                                    <div className='w_shuliang'><span>x2</span></div>
                                </div>
                            </div> 
                            <div><span>￥25</span></div>
                    </div>*/}
                        <div className='w_line'></div> 
                        <div className='w_storename'>
                            <span>打包费</span>
                            <span>￥{this.state.orderdetailsList.sort_price}</span>
                        </div>
                        <div className='w_storename'>
                            <span>配送费</span>
                            <span>￥{this.state.orderdetailsList.shop_delivery_money}</span>
                        </div>
                        <div className='w_storename'>
                            <span>店铺活动</span>
                            <span>￥3</span>
                        </div>
                        <div className='w_line'></div>
                        <div className='w_zongjia'>
                            <span>以优惠 <span>￥25</span></span>
                            <span>合计<span>￥{this.state.orderdetailsList.order_money}</span></span>
                        </div>

                    </div>
                    <div className='w_content_order'>
                        <div className='w_dianming'>
                            <p>配送信息</p>
                        </div>
                        <div className='w_line'></div>
                        <div className='w_storename'>
                            <span>期望时间</span>
                            <span>立即配送</span>
                        </div>
                        <div className='w_storename'>
                            <span>配送地址</span>
                            <span className='w_dizhi'>{this.state.orderdetailsList.users.address.receipt_address}</span>
                        </div>

                    </div>
                    <div className='w_content_order'>
                        <div className='w_dianming'>
                            <p>订单信息</p>
                        </div>
                        <div className='w_line'></div>
                        <div className='w_storename'>
                            <span>订单号码</span>
                            <span>{this.state.orderdetailsList.order_id}</span>
                        </div>
                        <div className='w_storename'>
                            <span>下单时间</span>
                            <span>{this.state.orderdetailsList.order_create_time}</span>
                        </div>
                        <div className='w_storename'>
                            <span>支付方式</span>
                            <span>{this.state.orderdetailsList.orderPay.order_pay_type}</span>
                        </div>

                    </div>
                </div>
            </div>
        );
        }
        // let orderdetailsList=this.props.location.state.order
        
    }
}

export default Orderdetails;